<template>
  <div class="PersonRole">
    <!-- 搜索框 -->
    <div class="PersonRole_serach">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="角色名:">
          <!-- <el-select
            v-model="personRoleQuery.name"
            placeholder="请选择所属角色"
            :disabled="personDisabled"
            clearable
            filterable
            @change="getroleSelList"
          >
          <el-option v-for="item in roleList" :label="item.name" :value="item.id" :key="item.id"></el-option>-->
          <el-input
            v-model="personRoleQuery.name"
            placeholder="请输入角色名字"
            clearable
            @change="getroleSelList"
          ></el-input>
          <!-- </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getroleSelList">确认搜索</el-button>
        </el-form-item>
        <el-form-item>
          <!-- 添加角色 -->
          <div class="PersonRole_top">
            <el-button
              icon="el-icon-circle-plus-outline"
              type="success"
              @click="handlerAdd"
              >添加角色</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="roleSelList"
      border
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        width: '100%',
        background: '#FAFAFA',
        color: '#606266',
        height: '60px'
      }"
    >
      <el-table-column prop="no" label="序号"></el-table-column>
      <el-table-column prop="name" label="角色名" width="250">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.name == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="roleNumber" label="角色人数" width="150">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.roleNumber == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.roleNumber }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="PermissionType" label="操作端" width="250">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.PermissionType == null" style="color: red"
              >暂无数据</span
            >
            <el-tag v-if="scoped.row.PermissionType == 1">总后台端</el-tag>
            <el-tag type="success" v-if="scoped.row.PermissionType == 2"
              >商户端</el-tag
            >
            <el-tag type="info" v-if="scoped.row.PermissionType == 3"
              >服务商端</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="describe" label="描述" width="650">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.describe == null" style="color: red"
              >暂无数据</span
            >
            <el-tag v-else-if="scoped.row.PermissionType == 1">{{
              scoped.row.describe
            }}</el-tag>
            <el-tag type="success" v-else-if="scoped.row.PermissionType == 2">{{
              scoped.row.describe
            }}</el-tag>
            <el-tag type="info" v-else-if="scoped.row.PermissionType == 3">{{
              scoped.row.describe
            }}</el-tag>
            <el-tag type="warning" v-else-if="scoped.row.PermissionType == 4">{{
              scoped.row.describe
            }}</el-tag>
            <el-tag type="danger" v-else-if="scoped.row.PermissionType == 5">{{
              scoped.row.describe
            }}</el-tag>
            <el-tag type="success" v-else-if="scoped.row.PermissionType == 6">{{
              scoped.row.describe
            }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" fixed="right">
        <template slot-scope="scoped">
          <div>
            <el-tag
              type="warning"
              class="tablebtn"
              @click="
                goassignment(
                  scoped.row.id,
                  scoped.row.name,
                  scoped.row.PermissionType
                )
              "
              >权限分配</el-tag
            >
            <el-tag
              type="success"
              class="tablebtn"
              @click="handlerEdit(scoped.row)"
              >编辑</el-tag
            >
            <el-tag
              type="info"
              class="tablebtn"
              @click="handlerDelete(scoped.row.id)"
              >删除</el-tag
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="personRoleQuery.pageSize"
        :current-page="personRoleQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
    </div>
    <!-- 编辑角色 -->
    <el-dialog
      :title="personName"
      :visible.sync="PersonRoledialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="PersonForm"
        :rules="PersonRules"
        ref="PersonRef"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称(必填)" prop="roleName">
          <el-input
            v-model="PersonForm.roleName"
            :disabled="personDisabled"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="	角色描述(必填)" prop="describe">
          <el-input
            v-model="PersonForm.describe"
            :disabled="personDisabled"
            placeholder="请输入角色描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="	操作端(必填)" prop="PermissionType">
          <el-select
            placeholder="请选择操作端"
            v-model="PersonForm.PermissionType"
            clearable
            filterable
          >
            <el-option
              v-for="item in permissonList"
              :label="item.name"
              :key="item.PermissionType"
              :value="item.PermissionType"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerReset">重置</el-button>
        <el-button type="primary" @click="handlerSureRole">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  roleSelPage,
  roleDel,
  roleUpdate,
  roleAdd,
  roleSel
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      value: "",
      // 搜索框的数据
      PersonRole_Form: {
        name: "",
        phone: "",
        job: ""
      },
      //   角色弹框的显示隐藏
      PersonRoledialogVisible: false,
      //   添加角色的弹框
      PersonForm: {
        describe: "",
        roleName: "",
        userId: "",
        id: "",
        PermissionType: "",
        companyId: ""
      },
      //   角色弹框的校验
      PersonRules: {
        describe: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ],
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        PermissionType: [
          { required: true, message: "请选择所属角色", trigger: "blur" }
        ]
      },
      //   角色列表的数据
      roleSelList: [],
      //   三个弹框不同的名字
      personName: "添加角色",
      personDisabled: false,
      // 分页
      personRoleQuery: {
        pageNumber: 1,
        pageSize: 10,
        name: ""
      },
      // 总条数
      count: 0,
      // 角色列表
      // roleList: []
      // 所属角色的数据
      permissonList: [
        {
          PermissionType: 1,
          name: "总后台端"
        },
        {
          PermissionType: 2,
          name: "商户端"
        },
        {
          PermissionType: 3,
          name: "服务商端"
        }
      ]
      // 用户信息
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.personRoleQuery.pageNumber = 1;
      this.getroleSelList();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getroleSelList();
      }
    },
    // 清空表单
    handlerReset() {
      this.$refs.PersonRef.resetFields();
    },
    // 获取角色列表
    getroleSelList() {
      const params = {
        pageNumber: this.personRoleQuery.pageNumber,
        pageSize: this.personRoleQuery.pageSize,
        name: this.personRoleQuery.name,
        PermissionType: ""
        // roleId: this.personRoleQuery.roleId,
        // companyId: this.org_id
      };
      this.postRequest(roleSelPage, params).then(res => {
        if (res.code == 200) {
          this.roleSelList = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.personRoleQuery.pageSize = val;
      this.getroleSelList();
    },
    handleCurrentChange(val) {
      this.personRoleQuery.pageNumber = val;
      this.getroleSelList();
    },
    // 点击确定 判断是添加角色还是编辑角色
    handlerSureRole() {
      this.$refs.PersonRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.personName == "添加角色") {
          this.handlerAddRole();
        } else if (this.personName == "编辑角色") {
          this.handlerEditRole();
        }
      });
    },
    // 封装一个添加角色的方法
    handlerAddRole() {
      this.PersonForm.companyId = this.org_id;
      this.postRequest(roleAdd, this.PersonForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加角色成功");
          this.getroleSelList();
          this.PersonRoledialogVisible = false;
          this.$refs.PersonRef.resetFields();
        } else if (res.code == 400) {
          this.$message.error(res.msg);
        }
      });
    },
    // 封装一个编辑角色的方法
    handlerEditRole() {
      this.PersonForm.companyId = this.org_id;
      this.postRequest(roleUpdate, this.PersonForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑角色成功");
          this.getroleSelList();
          this.PersonRoledialogVisible = false;
          this.$refs.PersonRef.resetFields();
        } else if (res.code == 400) {
          this.$message.error(res.msg);
        }
      });
    },
    //   添加角色的弹框
    handlerAdd() {
      // this.$router.push("/PersonAddRole");
      this.PersonRoledialogVisible = true;
    },
    //编辑角色的弹框
    handlerEdit(data) {
      this.PersonRoledialogVisible = true;
      this.$nextTick(() => {
        this.personName = "编辑角色";

        this.personDisabled = false;
        this.PersonForm.roleName = data.name;
        this.PersonForm.describe = data.describe;
        this.PersonForm.id = data.id;
        this.PersonForm.PermissionType = Number(data.PermissionType);
      });
    },
    //删除角色
    handlerDelete(id) {
      const params = {
        id: id,
        userId: this.PersonForm.userId
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(roleDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getroleSelList();
            } else if (res.code == 400) {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取角色列表---下拉--搜索
    // getroleSel() {
    //   this.postRequest(roleSel).then(res => {
    //     if (res.code == 200) {
    //       this.roleList = res.data;
    //     }
    //   });
    // },
    // 关闭弹框触发的事件
    handleClose() {
      this.$refs.PersonRef.resetFields();
      this.PersonRoledialogVisible = false;
    },
    // 权限分配
    goassignment(id, name, PermissionType) {
      window.sessionStorage.setItem("roleId", id);
      window.sessionStorage.setItem("roleName", name);
      window.sessionStorage.setItem("PermissionType", PermissionType);
      this.$router.push("/Assignment");
    }
  },
  created() {
    this.PersonForm.userId = window.sessionStorage.getItem("userId");
    const userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
    this.personRoleQuery.PermissionType = userInfo.PermissionType;
    this.personRoleQuery.roleId = userInfo.roleId;
    this.getDataInit();
    // 调用角色下拉数据
    // this.getroleSel();
  }
};
</script>

<style lang="less" scoped>
.PersonRole {
  padding: 20px;

  //   搜索框
  .PersonRole_serach {
    margin-top: 20px;
    padding: 6px;

    border: 1px solid #eaedf3;
    .demo-form-inline {
      margin-top: 15px;
    }
  }
  //   表格
  .tablebtn {
    cursor: pointer;
  }
}
</style>
